<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<!-- 事件修饰符，键盘修饰符见官网 -->
	<!-- 
		需求：div01和div02为两个div，它们的关系式，div01包含div02，也就是嵌套，为两个div各自绑定监听事件，各自响应各自的事件
	 -->
	<div id="demo">
		<div id="div01" style="width: 200px; height: 200px; background-color: red;" @click="test01">
			
			<!-- 
				解决办法：阻止单击事件的继续传播：
				v-on:click.stop
			 -->
			<div id="div02" style="width: 100px; height: 100px; background-color: yellow;" @click.stop="test02"></div>
		</div>
		
		<!-- 阻止事件的默认行为：例如a标签的href属性 -->
		<a href="https://www.baidu.com" @click.prevent="test03">阻止我的默认行为</a>
		
		<!-- 
			另外还有：
			提交事件不再重载页面：
			<form v-on:submit.prevent="onSubmit"></form>
			
			修饰符可以串联：
			<a v-on:click.stop.prevent="doThat"></a>
			
			只有修饰符：
			<form v-on:submit.prevent></form>
			
			添加事件监听器时使用事件捕获模式，即元素自身触发的事件先在此处理，然后才交由内部元素进行处理
			<div v-on:click.capture="doThis">...</div>
			
			只当在 event.target 是当前元素自身时触发处理函数，即事件不是从内部元素触发的
			<div v-on:click.self="doThat">...</div>
			
			使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 
			v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
			
			2.1.4 新增：点击事件将只会触发一次
			<a v-on:click.once="doThis"></a>
			
			2.3.0 新增：
				滚动事件的默认行为 (即滚动行为) 将会立即触发， 而不会等待 `onScroll` 完成， 这其中包含 `event.preventDefault()` 的情况
				<div v-on:scroll.passive="onScroll">...</div>
		 -->
	</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
	const vm = new Vue({
		el:'#demo',
		data:{
			
		},
		methods:{
			test01:function() {
				alert("点击外层div，内层div不会响应");
			},
			test02:function() {
				alert("如果你是仅仅给该div绑定了一个监听事件，那么它外层的div也会响应，这就叫做事件的冒泡。");
			},
			test03:function() {
				alert("阻止了我的默认行为");
			}
		}
			
	});
</script>
</body>
</html>
